import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'
import { Col, Row, Layout, Select } from 'antd';
import style from './Video.module.css'
import * as XLSX from 'xlsx';
import { useDispatch, useSelector } from 'react-redux';
import { setList } from '../../redux/slices/allDataSlice';
import type { RootState } from '../../redux/store'
import MonthLine from '../../component/MonthLine';
import { IVideoData } from '../../interface/IVideoData';
import CityBar from '../../component/CityBar';
// import Ranking from '../../component/Ranking';
import Proportion from '../../component/Proportion';
import VideoProportionChange from '../../component/VideoProportionChange';
import TeacherLine from '../../component/TeacherLine';
import { getVideoItemDeduct } from '../../lib/publicMethod';

const { Header, Content } = Layout
interface ITeaToList {
  [key: string]: IVideoData[]
}
export default function Video() {
  const [data, setData] = useState([])
  const dispatch = useDispatch()
  const allDataList = useSelector((state: RootState) => state.allData.list)
  function fileChange(e: ChangeEvent<HTMLInputElement>) {
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer((e.target.files as FileList)[0])
    fileReader.addEventListener('load', function (ev) {
      const workBook = XLSX.read(ev.target?.result, {
        type: 'binary'
      })
      const wsname = workBook.SheetNames[0]
      const sheetJson = XLSX.utils.sheet_to_json(workBook.Sheets[wsname])
      dispatch(setList(sheetJson as []))
    })
  }
  function selectChange(value: string) {
    if (value === 'l0') {
      setData(allDataList)
    }
    else if (value === 'l1') {
      setData(allDataList.filter(((item: IVideoData) => item['阶段'].includes('一阶段'))))
    } else if (value === 'l2') {
      setData(allDataList.filter(((item: IVideoData) => item['阶段'].includes('二阶段'))))
    }
    else if (value === 'l3') {
      setData(allDataList.filter(((item: IVideoData) => item['阶段'].includes('三阶段'))))
    }
  }
  const teaToList = useMemo(() => {
    const list: ITeaToList = {}
    for (let i = 0; i < data.length; i++) {
      if (list[data[i]['姓名']]) {
        list[data[i]['姓名']].push(data[i])
      } else {
        list[data[i]['姓名']] = [data[i]]
      }
    }
    return list
  }, [data])
  useEffect(() => {
    setData(allDataList)
  }, [allDataList])
  return (
    <>
      <Header className={style.header}>
        <input type="file" onChange={fileChange} />
        <Select
          defaultValue="全部"
          style={{ width: 120 }}
          onChange={selectChange}
          options={[
            { value: 'l0', label: '全部' },
            { value: 'l1', label: '一阶段' },
            { value: 'l2', label: '二阶段' },
            { value: 'l3', label: '三阶段' }
          ]}
        />
      </Header>
      <div className={style.contentBox}>
        <Content className={style.content}>
          <Row>
            <Col span={12}>
              <MonthLine data={data} min={75}></MonthLine>
            </Col>
            <Col span={12}>
              <CityBar data={data}></CityBar>
            </Col>
          </Row>
          {/* <Row>
            <Ranking data={data}></Ranking>
          </Row> */}
          <Row>
            <Col span={12}>
              <Proportion deductSum={getVideoItemDeduct(data).sum}></Proportion>
            </Col>
            <Col span={12}>
              <VideoProportionChange data={data}></VideoProportionChange>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <TeacherLine data={data} teaToList={teaToList} min={30}></TeacherLine>
            </Col>
          </Row>
        </Content>
      </div>
    </>
  )
}
